package com.wyl.salary.ui.page

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import com.wyl.salary.R
import com.wyl.salary.ui.components.PreviewSalaryList
import com.wyl.salary.ui.components.SalaryList
import com.wyl.salary.ui.theme.SalaryTheme
import com.wyl.salary.ui.viewmodel.SalaryViewModel
import kotlinx.coroutines.launch

@Composable
private fun SalaryListPage(
    onAddPress: () -> Unit,
    durationClick: () -> Unit,
    defaultSalaryClick: () -> Unit,
    dataExportClick: () -> Unit,
    dataImportClick: (String) -> Unit,
    content: @Composable () -> Unit,
) {
    val scaffoldState: ScaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()
    val openDialog = remember { mutableStateOf(false) }
    Scaffold(
        scaffoldState = scaffoldState,
        modifier = Modifier.fillMaxSize(),
        topBar = {
            TopAppBar(
                title = { Text("工作表") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = "菜单")
                    }
                },
                actions = {
                    IconButton(onClick = onAddPress) {
                        Icon(imageVector = Icons.Filled.Add, contentDescription = "添加")
                    }
                }
            )
        },
        drawerContent = {
            SalaryListDrawer(
                durationClick = {
                    durationClick.invoke()
                    scope.launch {
                        scaffoldState.drawerState.close()
                    }
                },
                defaultSalaryClick = {
                    defaultSalaryClick.invoke()
                    scope.launch {
                        scaffoldState.drawerState.close()
                    }
                },
                dataExportClick = {
                    dataExportClick.invoke()
                    scope.launch {
                        scaffoldState.drawerState.close()
                    }
                },
                dataImportClick = { openDialog.value = true },
            )
        },
    ) {
        content()
        ImportDialog(openDialog) { data ->
            dataImportClick(data)
            scope.launch {
                scaffoldState.drawerState.close()
            }
        }
    }
}

@Composable
fun SalaryListPageWithViewModel(
    navController: NavHostController,
    viewModel: SalaryViewModel = viewModel()
) {
//    Log.d("Lele", "SalaryListPage: ")
    val context = LocalContext.current
    SalaryListPage(
        onAddPress = { navController.navigate(Router.AddSalaryPage) },
        durationClick = { navController.navigate(Router.SetDurationPage) },
        defaultSalaryClick = { navController.navigate(Router.DefaultSalaryPage) },
        dataExportClick = { viewModel.exportData(context) },
        dataImportClick = viewModel::importData,
    ) {
        SalaryList(
            salaryList = viewModel.salaries,
            viewModel.salary,
            viewModel.duration,
            viewModel.tipping
        ) {
            navController.navigate(Router.EditSalaryPage + it)
        }
    }
}

@Composable
private fun ImportDialog(openDialog: MutableState<Boolean>, onConfirm: (String) -> Unit) {
    var content by remember { mutableStateOf("") }
    if (openDialog.value) {
        AlertDialog(
            onDismissRequest = { openDialog.value = false },
            title = { Text(text = "导入") },
            text = {
                OutlinedTextField(
                    value = content,
                    onValueChange = { content = it },
                    label = { Text(text = "数据") },
                    singleLine = true,
                    placeholder = { Text("请输入导入内容") },
                )
            },
            confirmButton = {
                TextButton(onClick = {
                    openDialog.value = false
                    onConfirm(content)
                }) {
                    Text(text = "确认")
                }
            },
            dismissButton = {
                TextButton(onClick = { openDialog.value = false }) {
                    Text(text = "取消")
                }
            },
        )
    }
}


@Preview(showBackground = true)
@Composable
private fun PreviewMainPage() {
    SalaryTheme {
        SalaryListPage(
            onAddPress = {},
            durationClick = {},
            defaultSalaryClick = {},
            dataExportClick = {},
            dataImportClick = {},
            {
                PreviewSalaryList()
            },
        )
    }
}

@Preview(showBackground = true)
@Composable
private fun PreviewSalaryListDrawer() {
    SalaryListDrawer(
        durationClick = {},
        defaultSalaryClick = {},
        dataExportClick = {},
        dataImportClick = {},
    )
}

@Composable
private fun SalaryListDrawer(
    durationClick: () -> Unit,
    defaultSalaryClick: () -> Unit,
    dataExportClick: () -> Unit,
    dataImportClick: () -> Unit,
) {
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(280.dp)
                .background(
                    Brush.linearGradient(
                        colors = listOf(
                            MaterialTheme.colors.primary,
                            MaterialTheme.colors.primaryVariant
                        ),
                    )
                ),
            contentAlignment = Alignment.Center
        ) {
            Image(
                painter = painterResource(id = R.drawable.avatar),
                contentDescription = null,
                modifier = Modifier
                    .size(120.dp)
                    .clip(CircleShape)
            )
        }
        Divider(thickness = 16.dp, color = MaterialTheme.colors.onSurface.copy(alpha = 0.06f))
        Text(
            text = "设置起止时间",
            modifier = Modifier
                .fillMaxWidth()
                .clickable(onClick = durationClick)
                .padding(16.dp)
        )
        Divider()
        Text(
            text = "设置默认时薪",
            modifier = Modifier
                .fillMaxWidth()
                .clickable(onClick = defaultSalaryClick)
                .padding(16.dp)
        )
        Divider()
        Text(
            text = "数据导出",
            modifier = Modifier
                .fillMaxWidth()
                .clickable(onClick = dataExportClick)
                .padding(16.dp)
        )
        Divider()
        Text(
            text = "数据导入",
            modifier = Modifier
                .fillMaxWidth()
                .clickable(onClick = dataImportClick)
                .padding(16.dp)
        )
    }
}
